<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>view</title>
    <link rel="stylesheet" href="../model/element.css">
    <link rel="stylesheet" href="../model/jsFn.css">
</head>
<body>
<!--目录-->
<div class="catalog">
    <h2>目录</h2>
    <ul>
        <li>
            <p><a href="#element">< view ></a></p>
        </li>
        <li>
            <p><a href="#attribute">属性</a></p>
            <ul>
                <li><p><a href="#example">实例</a></p></li>
                <li><p><a href="#optional">可选属性</a></p></li>
                <li><p><a href="#note">提示和注释</a></p></li>
                <li><p><a href="#sketch">效果图</a></p></li>
            </ul>
        </li>
        <li>
            <p><a href="#jsFn">js函数</a></p>
            <ul>
                <li><p><a href="#jsFn_val">val</a></p></li>
                <li><p><a href="#jsFn_show">show</a></p></li>
                <li><p><a href="#jsFn_height">height</a></p></li>
                <li><p><a href="#jsFn_background">background</a></p></li>
            </ul>
        </li>
    </ul>
</div>
<!--标签-->
<div id="element">
    <h2>view</h2>
    <div>简介:</div>
    <p>view是抽象标签,是所有控件的父类,本身不能作为标签使用</p>
    <p>view有的属性,它的子类都会有</p>
</div>
<!--属性-->
<div id="attribute">
    <h2>属性</h2>
    <div style="margin-left: 25px" id="example">
        <h3>实例:</h3>
        <!--xmp标签可以直接书写xml格式文本-->
        <xmp>
            view是抽象标签,是所有控件的父类,本身不能作为标签使用
        </xmp>
    </div>
    <div id="optional">
        <h3>可选属性:</h3>
        <table >
            <tbody>
            <tr>
                <th>属性</th>
                <th>值</th>
                <th>描述</th>
            </tr>
            <tr>
                <td>id</td>
                <td>string</td>
                <td>唯一id编号</td>
            </tr>
            <tr>
                <td>style</td>
                <td>string</td>
                <td>具体的样式</td>
            </tr>
            <tr>
                <td>click</td>
                <td>javascript</td>
                <td>点击事件,要执行的函数表示式</td>
            </tr>
            <tr>
                <td>longClick</td>
                <td>javascript</td>
                <td>长按点击事件,要执行的函数表示式</td>
            </tr>
            <tr>
                <td>height</td>
                <td>int</td>
                <td>控件的高度,单位px,-1:全屏,-2,:自适应</td>
            </tr>
            <tr>
                <td>background</td>
                <td>color</td>
                <td>控件的背景颜色,只有颜色值的透明度不为00时,ripple才有用</td>
            </tr>
            <tr>
                <td>width</td>
                <td>int</td>
                <td>控件的宽度,单位px,-1:全屏,-2,:自适应</td>
            </tr>
            <tr>
                <td>margin</td>
                <td>(int,int,int,int)||int</td>
                <td>外边距,上右下左|四个边距一样</td>
            </tr>
            <tr>
                <td>padding</td>
                <td>(int,int,int,int)||int</td>
                <td>内边距,上右下左|四个边距一样</td>
            </tr>
            <tr>
                <td>show</td>
                <td>(gone/false)||(invisible)||(''/show/true/visible)</td>
                <td>控件是否显示,默认显示</td>
            </tr>
            <tr>
                <td>border</td>
                <td>int|color|(int,color)||(color,int)</td>
                <td>int:边框线的大小,color:边框线的颜色</td>
            </tr>
            <tr>
                <td>radius</td>
                <td>int</td>
                <td>圆角</td>
            </tr>
            <tr>
                <td>ripple</td>
                <td>color</td>
                <td>color:点击水纹效果的颜色,若无此属性,则无点击水纹效果,只有颜色值的透明度不为00时,ripple才有用</td>
            </tr>
            </tbody>
        </table>
    </div>
    <div id="note">
        <h3>提示和注释:</h3>
        <p>控件标签名不区分大小写,属性名区分大小写</p>
    </div>
    <div id="sketch">
        <h3>效果图:</h3>
        <p>无</p>
    </div>
</div>
<!--js方法-->
<div id="jsFn">
    <h2>js方法</h2>
    <div class="jsFnModel" id="jsFn_val">
        <h3>val:</h3>
        <div class="shape">
            <h3>函数使用样式</h3>
            <p>view.val() ->object</p>
        </div>
        <div class="profile">
            <h3>函数功能简介</h3>
            <p>获得view控件里最重要,最常用的返回值</p>
        </div>
        <div class="version">
            <p>稳定性;2 - 稳定的</p>
            <p>新增于:v0.0.0</p>
        </div>
        <div class="params">
            <h3>参数列表:</h3>
            <p>无</p>
        </div>
        <div class="res">
            <h3>返回值:</h3>
            <p>object</p>
            <p>获得view控件里最重要,最常用的返回值,具体得结合子控件使用</p>
        </div>
        <div class="code">
            <h3>例子</h3>
            <pre>
            <xmp>
                <p id="test_p">你好</p>
                console.log(document('test_p').val());
                //输出p里面最重要的值,也就是p的文本;
            </xmp>
        </pre>
        </div>
        <div class="error">
            <h3>抛出错误</h3>
        </div>
    </div>
    <div class="jsFnModel" id="jsFn_show">
        <h3>show:</h3>
        <div class="shape">
            <h3>函数使用样式</h3>
            <p>view.show([option]) ->null</p>
        </div>
        <div class="profile">
            <h3>函数功能简介</h3>
            <p>展示或隐藏一个控件</p>
        </div>
        <div class="version">
            <p>稳定性;2 - 稳定的</p>
            <p>新增于:v0.0.0</p>
        </div>
        <div class="params">
            <h3>参数列表:</h3>
            <ul>
                <li>
                    <p>option=show</p>
                    <p>&nbsp;string&nbsp;</p>
                    <p>option==='gone'时,控件隐藏且不占布局 <br/>
                        options ==='invisible'时,控件隐藏且占布局 <br/>
                        options ==='show'时,控件显示 <br/>
                        默认option = 'show';
                    </p>
                </li>
            </ul>
        </div>
        <div class="res">
            <h3>返回值:</h3>
            <p>无</p>
        </div>
        <div class="code">
            <h3>例子</h3>
            <pre>
            <xmp>
                <p id="test_p2">你好</p>
                document.$('test_p2').show('gone');
                //控件完全隐藏
            </xmp>
        </pre>
        </div>
        <div class="error">
            <h3>抛出错误</h3>
        </div>
    </div>
    <div class="jsFnModel" id="jsFn_height">
        <h3>height:</h3>
        <div class="shape">
            <h3>函数使用样式</h3>
            <p>view.height([height]) -> int</p>
        </div>
        <div class="profile">
            <h3>函数功能简介</h3>
            <p>设置和得到当前控件的高度</p>
        </div>
        <div class="version">
            <p>稳定性;2 - 稳定的</p>
            <p>新增于:v0.0.0</p>
        </div>
        <div class="params">
            <h3>参数列表:</h3>
            <ul>
                <li>
                    <p>height</p>
                    <p>&nbsp;int&nbsp;</p>
                    <p>设置控件的高度,若为空,则得到控件的当前高度</p>
                </li>
            </ul>
        </div>
        <div class="res">
            <h3>返回值:</h3>
            <p>int</p>
            <p>控件高度</p>
        </div>
        <div class="code">
            <h3>例子</h3>
            <pre>
            <xmp>
                <p id="test_p3">你好</p>
                document.$('test_p3').height(100);
                //设置控件高度
                let height = document.$('test_p2').height();
                console.log(height);
                //得到控件高度
            </xmp>
        </pre>
        </div>
        <div class="error">
            <h3>抛出错误</h3>
        </div>
    </div>
    <div class="jsFnModel" id="jsFn_background">
        <h3>background:</h3>
        <div class="shape">
            <h3>函数使用样式</h3>
            <p>view.background(background) ->null</p>
        </div>
        <div class="profile">
            <h3>函数功能简介</h3>
            <p>设置背景图片或颜色</p>
        </div>
        <div class="version">
            <p>稳定性;2 - 稳定的</p>
            <p>新增于:v0.0.0</p>
        </div>
        <div class="params">
            <h3>参数列表:</h3>
            <ul>
                <li>
                    <p>background</p>
                    <p>&nbsp;url|color&nbsp;</p>
                    <p>url:背景图片,color:背景颜色</p>
                </li>
            </ul>
        </div>
        <div class="res">
            <h3>返回值:</h3>
            <p>无</p>
        </div>
        <div class="code">
            <h3>例子</h3>
            <pre>
            <xmp>
                <p id="test_p4">你好</p>
                document.$('test_p4').background("#ff22ff");
                //设置背景色
            </xmp>
        </pre>
        </div>
        <div class="error">
            <h3>抛出错误</h3>
        </div>
    </div>
</div>
<div class="author">
    <p>by-草草</p>
</div>
</body>
</html>